{% extends "links/base.html" %}
{% load staticfiles %}
{% load crispy_forms_tags %}

{% block title %}
{% if edit %}Edit a link{% else %}Add a link{% endif %}
{% endblock %}

{% block extrahead %}
  <link rel="stylesheet" type="text/css" href="{% static "js-custom-themes/jquery-ui/theme/jquery-ui.css" %}" />
  <link href="{% static "js-custom-themes/tagit/theme/jquery.tagit.css" %}" rel="stylesheet" type="text/css"/>
{% endblock %}


{% block breadcrumb %}
<li><a href="{% url "home" %}">Home</a></li>
<li><a href="{% url "links" %}">Links</a></li>
<li class="current">{% if edit %}Edit a link{% else %}Add a link{% endif %}</li>
{% endblock %}

{% block content %}
  {% crispy form %}
{% endblock %}


{% block last_body %}
<script type="text/javascript" src="{% static "bower_components/jquery-ui/ui/minified/jquery-ui.min.js" %}" ></script>
<script type="text/javascript" src="{% static "bower_components/tag-it/js/tag-it.min.js" %}" ></script>
<script type="text/javascript">
  $(function(){
    $('#id_tags').tagit({
      availableTags: [{{ tags|safe }}],
      autocomplete: {
        delay: 0,
        minLength: 2
      },
      allowSpaces: true
    });

    $('#id_tags').on('change', function() {
      $('#suggest').html('');
      $.ajax({
        type:"GET",
        url: '/tag/related/'+$(this).val(),
        success: function(result) {
          result = $.parseJSON(result);
          for(var i = 0; i < result.length; i++) {
            tag = result[i]
            $('#suggest').append('<li class="tag"><a id="ui-id-'+tag.pk+'" class="suggest_add" tabindex="-1" data-tag="'+tag.tag+'"><span class="c">'+tag.count+'</span><span class="t">'+tag.tag+'</span></a></li>');

            $('.suggest_add').on('click', function() {
              var $tag = $(this).attr('data-tag');
              $('#id_tags').tagit("createTag", $tag);
            });
          }
        }
      });
    });
  });
</script>
<script src="//algorithmia.com/assets/javascripts/algorithmia.js" type="text/javascript"></script>
<script>
var api_key = "a7c2474b72434761b0e9ff6f9332da3f";
{% if edit %}
Algorithmia.query("/vhf/AutoTagURL", api_key, "{{ url }}", function(error, result) {
  $('#div_id_tags').after('<div id="algo"><label>Automatic suggestions : </label></div><div class="right"><a href="http://algorithmia.com"><img src="{% static "img/algorithmia.png" %}"></a></div>');
  sug = [];
  for(res in result) {
    sug.push('<a><span class="tag suggest_add" style="display: inline-block" tabindex="-1" data-tag="'+ res +'"><span class="t">'+res+'</span></span></a>');
  }
  $('#algo').append(sug.join(' '));

  $('.suggest_add').on('click', function() {
    var $tag = $(this).attr('data-tag');
    $('#id_tags').tagit("createTag", $tag);
  });
});
{% else %}
$('#suggest').after('<div id="algo"></div>');

function toggle_spinner(el) {
  $(el).toggle();
}

$('#id_url').on('keyup', function() {
  $('#algo').html('');
  $('#algo').append('<label>Automatic suggestions : </label>').append('<img id="spinner" src="{% static "img/spinner.gif" %}">');
  if($(this).val().length >= 11) {
    Algorithmia.query("/vhf/AutoTagURL", api_key, $(this).val(), function(error, result) {
      toggle_spinner('#spinner');
      $('#algo').html('').append('<label>Automatic suggestions : </label>');
      sug = [];
      for(res in result) {
        sug.push('<a><span class="tag suggest_add" style="display: inline-block" tabindex="-1" data-tag="'+ res +'"><span class="t">'+res+'</span></span></a>');
      }
      $('#algo').append(sug.join(' '));
      $('#algo').append('<div class="right"><a href="http://algorithmia.com"><img src="{% static "img/algorithmia.png" %}"></a></div>');
      $('.suggest_add').on('click', function() {
        var $tag = $(this).attr('data-tag');
        $('#id_tags').tagit("createTag", $tag);
      });
    });
  }
})
{% endif %}

</script>
{% endblock last_body %}
